<template>
	<u-navbar :leftIconSize="42" titleStyle="font-size:20px;font-weight:600" :autoBack="true" :placeholder='true'
		title="练习情况">
	</u-navbar>
	<view class="" style="padding: 15px;font-weight: bold;font-size: 15px;">
		学员：{{data.name}}
	</view>
  <empty :config="{text:'该学员暂无练习记录'}" v-if="data.trainList.length === 0" />
  <view v-else style="background-color: #F7F7F7;">
		<scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
			<view class=" padding-30rpx white-bg" style="color:#666666;" v-for="(item,index) in data['trainList']"
				:style="index == data['trainList'].length-1?'':{'border-bottom':'1px solid rgba(0,0,0,0.1)'}">
				<text style="font-weight: bold;font-size: 15px;color: #333333;">共{{item.answerAmount || 0}}题 做对{{item.rightAmount || 0}}题</text>
				<view class="flex-jc-s-b" style="font-size: 13px;margin-top: 3px;">
					<text style="">准确率：{{Math.floor(item.accuracy * 100)}}%</text>
					<text style="">用时：{{getTime(item.durationSecond)}} </text>
					<text style="">日期：{{item.submitTime}}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
  import { onLoad } from "@dcloudio/uni-app";
	import { onMounted, reactive } from "vue";
  import empty from '@/pages/components/empty.vue'
  import { getTime } from '@/utils/timeStamp.js'
  import {trainPagingApi} from './const'
	const data = reactive({
    name: '',
    studentCourseId: '',
		trainList: []
	})

	function lower(e) {
		console.log(e)
	}

  const list = () => {
    trainPagingApi({studentCourseId: data.studentCourseId}).then((res) => {
      data.trainList = res.rows
    })
  }
  onLoad((options) => {
    data.studentCourseId = options.studentCourseId || '';
    data.name = options.name || '';
  })
  onMounted(() => {
    list()
  })
</script>

<style>
	.scroll-Y {
		height: calc(100vh - 74px - 100px);
		/* border: 1px solid red; */
	}

	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		border: 1px solid red;
		font-size: 36rpx;
	}
</style>
